<template>
  <j-modal
    :title="title"
    :width="1000"
    :visible="visible"
    :confirmLoading="confirmLoading"
    switchFullscreen
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭">
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <a-row :gutter="24">
          <a-col :xl="12" :lg="12" :md="12" :sm="24">
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="活动名称">
              <a-input placeholder="请输入活动名称" v-decorator="['actName', {}]"/>
            </a-form-item>
          </a-col>
          <a-col :xl="12" :lg="12" :md="12" :sm="24">
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="预算">
              <j-select-budget-fee placeholder="请选择预算" :multiple="false"
                                   v-decorator="['budgetCode', {}]"
              />
            </a-form-item>
          </a-col>
          <a-col :xl="12" :lg="12" :md="12" :sm="24">
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="活动大类">
              <j-select-biz-component :width="1000" v-bind="categoriesConfigs" :checkVal="getBudgetCode" v-on="$listeners"
                                      v-decorator="['categoriesCode', {}]"/>
              <!--              <j-select-categories placeholder="请选择活动大类" :multiple="false"-->
              <!--                                   :checkVal="getBudgetCode" :checkTip="'请选先择预算'"-->
              <!--                                   v-decorator="['categoriesCode', {}]"/>-->
            </a-form-item>
          </a-col>
          <a-col :xl="12" :lg="12" :md="12" :sm="24">
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="申请金额">
              <a-input-number v-decorator="[ 'amount', {}]"/>
            </a-form-item>
          </a-col>
          <a-col :xl="12" :lg="12" :md="12" :sm="24">
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="活动时间">
              <a-range-picker format="YYYY-MM-DD" v-decorator="['actDate', {}]"/>
            </a-form-item>
          </a-col>
          <a-col :xl="12" :lg="12" :md="12" :sm="24">
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="订货时间">
              <a-range-picker format="YYYY-MM-DD" v-decorator="['orderDate', {}]"/>
            </a-form-item>
          </a-col>
          <a-col :xl="12" :lg="12" :md="12" :sm="24">
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="备注">
              <a-textarea placeholder="请输入备注" v-decorator="['remarks', {}]"/>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-spin>
    <!-- 活动明细 -->
    <a-tabs v-model="tabs.activeKey">
      <a-tab-pane tab="活动明细" :key="tabs.global.key" forceRender>
        <tpm-act-detail-list :categoriesCode="getcategoriesCode" :tempUuid="this.form.tempUuid"></tpm-act-detail-list>
      </a-tab-pane>
    </a-tabs>
  </j-modal>
</template>

<script>
  import {httpAction} from '@/api/manage'
  import pick from 'lodash.pick'
  import moment from "moment"
  import {FormTypes} from '@/utils/JEditableTableUtil'
  import JEditableTable from '@comp/cn-form/JEditableTable'
  //import TpmActDetailList from '../TpmActDetailList'
  import JSelectBudgetFee from '@/components/cn-select-popup/JSelectBudgetFee'
  import JSelectCategories from '@/components/cn-select-popup/JSelectCategories'
  import JSelectBizComponent from '@/components/cn-select-popup/JSelectBizComponent'
  import { PageListMixin } from '@/mixins/PageListMixin'
  export default {
    name: "TpmFeePoolModal",
    mixins: [PageListMixin],
    components: {
      JEditableTable, JSelectBudgetFee, JSelectCategories,JSelectBizComponent,
      'my-action-button': {
        props: {rowEvent: Object, allowEmpty: Boolean},
        methods: {
          confirmIsShow() {
            const {index, allValues: {inputValues}} = this.rowEvent
            let value = inputValues[index]
            return value.digits || value.pattern
          },
          handleLineAdd() {
            const {target} = this.rowEvent
            target.add()
          },
          handleLineDelete() {
            const {rowId, target} = this.rowEvent
            target.removeRows(rowId)
          },
          renderDeleteButton() {
            if (this.allowEmpty || this.rowEvent.index > 0) {
              if (this.confirmIsShow()) {
                return (
                  <a-popconfirm title="确定要删除吗？" onConfirm={this.handleLineDelete}>
              <a-button icon="minus"/>
                  </a-popconfirm>
              )
              } else {
                return (
                  <a-button icon="minus" onClick={this.handleLineDelete}/>
              )
              }
            }
            return ''
          },
        },
        render() {
          return (
            <div>
            <a-button onClick={this.handleLineAdd} icon="plus"/>
            &nbsp;
          {this.renderDeleteButton()}
        </div>
        )
        }
      }
    },
    computed: {
      categoriesConfigs: {
        get() {
          return {
            name: '活动大类',
            displayKey: 'categoriesName',
            returnKeys: ['id', 'categoriesCode'],
            listUrl: window._CONFIG['domianTpmURL']+'/act/tpmActCategories/findPageList',
            queryParamCode: 'categoriesName',
            queryParamText: '活动大类名称',
            columns: [
              {title: '活动大类名称', dataIndex: 'categoriesName', align: 'center', width: '50%', widthRight: '70%'},
              {title: '活动大类编号', dataIndex: 'categoriesCode', align: 'center', width: '50%'},
            ],
            checkTip:{
              budgetCode:'请选先择预算'
            },
          }
        }
      }
    },
    data() {
      return {
        title: "操作",
        visible: false,
        model: {},
        labelCol: {
          xs: {span: 24},
          sm: {span: 5},
        },
        wrapperCol: {
          xs: {span: 24},
          sm: {span: 16},
        },

        confirmLoading: false,
        form: this.$form.createForm(this),
        validatorRules: {},
        tabs: {
          activeKey: 'global',
          global: {
            key: 'global',
            columns: [
            ],
            dataSource: [],
          },
        },
        url: {
          add:window._CONFIG['domianTpmURL']+ "/act/tpmAct/saveOrUpdate",
          edit:window._CONFIG['domianTpmURL']+ "/act/tpmAct/saveOrUpdate",
        },
      }
    },
    created() {
    },
    methods: {
      getcategoriesCode() {
        return !!this.form.getFieldValue('categoriesCode')
      },
      getTempUuid(){
        return this.form.getFieldValue('tempUuid')
      },
      getBudgetCode() {
        return {'budgetCode': this.form.getFieldValue('budgetCode')}
      },
      add() {
        this.edit({});
      },
      edit(record) {
        this.form.resetFields();
        var actDate=new Array();
        actDate.push(record.beginDate);
        actDate.push(record.endDate);
        this.form.actDate = actDate;

        var orderDate=new Array();
        orderDate.push(record.orderBeginDate);
        orderDate.push(record.orderEndDate);

        if (record.tempUuid == undefined || record.tempUuid == ''){
          record.tempUuid = this.generateUUID(false);
        }
        this.form.tempUuid = record.tempUuid
        this.model = Object.assign({}, record);
        this.model.orderDate = orderDate;
        this.model.actDate = actDate;
        this.visible = true;
        this.$nextTick(() => {
          this.form.setFieldsValue(pick(this.model, 'actDate','orderDate','remarks', 'actType', 'actCode', 'actName', 'budgetCode', 'budgetName', 'receiptor', 'amount', 'beginDate', 'endDate', 'orderBeginDate', 'orderEndDate', 'tempUuid', 'auditStatus', 'processKey', 'needShare', 'categoriesCode', 'categoriesName', 'receiptorPositionCode', 'budgetSubjectsCode', 'budgetSubjectsName', 'workFlowKey', 'workFlowName'))
          //时间格式化
        });

      },

      handleAdd() {

      },
      close() {
        this.$emit('close');
        this.visible = false;
      },
      handleOk() {
        const that = this;
        // 触发表单验证
        this.form.validateFields((err, values) => {
          if (!err) {
            that.confirmLoading = true;
            let httpurl = '';
            let method = '';
            httpurl += this.url.add;
            method = 'post';

            let formData = Object.assign(this.model, values);
            //时间格式化
            httpAction(httpurl, formData, method).then((res) => {
              if (res.success) {
                that.$message.success(res.message);
                that.$emit('ok');
              } else {
                that.$message.warning(res.message);
              }
            }).finally(() => {
              that.confirmLoading = false;
              that.close();
            })


          }
        })
      },
      handleCancel() {
        this.close()
      },


    }
  }
</script>

<style lang="less" scoped>

</style>
